<template>
    <div>
        <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="proxy.$leftClick()" />
        <div class="order-list">
            <div class="order-item" >
                <div class="address" v-if="data.children.length>0">
                    <van-contact-card 
                        type="edit"
                        :name="data.children[0].name" 
                        :tel="data.children[0].tel+' ('+data.children[0].province+data.children[0].city+data.children[0].county+data.children[0].addressDetail+')'" 
                        :editable="false" 
                    />
                    <div class="time">
                        购买时间: {{ dateFormatInit(Number(data.time) ) }}
                    </div>
                    <van-card
                        v-for="(v,i) in data.children"
                        :key="i"
                        :origin-price="v.originprice"
                        :price="((v.originprice * v.discount) / 10).toFixed(2)"
                        :title="v.proname"
                        class="goods-card"
                        :thumb="v.img1"
                        @click="gotowhere('/detail/'+v.proid)"
                    >
                        <template #tags>
                            <van-tag plain type="primary">标签</van-tag>
                        </template>
                        <template #footer>
                            <span>小计 : {{  ((v.originprice * v.discount) / 10 * v.num ).toFixed(2)   }}</span>
                        </template>
                    </van-card>

                    <div class="time cred">
                        总计: {{ data.children.reduce((prev,v)=>{ return prev + (v.originprice * v.discount) / 10 * v.num },0) }}
                    </div>

                    <div>
                        <van-button type="danger" size="mini">删除订单</van-button>
                    </div>
                    <div>
                        <van-button type="success" size="mini">取消订单</van-button>
                    </div>
                    <div>
                        <van-button type="default" size="mini">申请退款</van-button>
                    </div>


                </div>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { getCurrentInstance,ref,onBeforeMount } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { useDingdan } from '@/store/dingdan';
import moment from 'moment'
const {proxy}:any =  getCurrentInstance();
const route = useRoute();
const router = useRouter();
// 定义订单的pinia
const store = useDingdan();
// data容器保存所有已经被转化过的数据
const data = ref<obj>({} as obj);

const dateFormatInit = (time:number,type='YYYY-MM-DD HH:mm:ss')=>{
    return moment(time).format(type);
}

const gotowhere = (url:string)=>{
        router.push(url)
}

onBeforeMount(()=>{
    // 获取订单的id
    let res = store.findData(route.params.id as string);
    if(res != undefined){
        data.value = res!
    }else{
        router.push({name:'dingdanxingxi'})
    }
})
</script>

<style lang="scss" scoped>
.order-list{
    padding:15px;
    .order-item{
        margin-top:15px;
        background: #ddd;
        border-radius: 10px;
        padding:10px;
        .time{
            color:#666;
            margin:10px 0 ;
            font-size: 14px;
        }

        .goods-card{
            border-radius: 10px;
        }

        .cred{
            color:#f50;
        }
    }
}
</style>